<div style="position:relative;width:100%;height:100%;z-index:0;">
  <vtk-sync-view
    :id="id"
    :wsClient="wsClient"
    ref="localView"
    :style="localStyle"

    :camera="camera"
    :interactorEvents="interactorEvents"
    :interactorSettings="interactorSettings"
    :contextName="contextName"
    :boxSelection="boxSelection"

    :viewState="getViewState()"

    @resetCamera="trigger(cameraKey, [$refs.localView.getCamera()])"
    @onEndAnimation="trigger(cameraKey, [$refs.localView.getCamera()])"
    @beforeSceneLoaded="localRenderingReady = false"
    @onReady="localRenderingReady = $event"

    @BoxSelection="$emit('BoxSelection', $event)"
  >
    <slot></slot>
  </vtk-sync-view>
  <vtk-remote-view
    :id="id"
    :wsClient="wsClient"
    ref="remoteView"
    :style="remoteStyle"
    :visible="mode === 'remote' || !localRenderingReady"

    @onEndAnimation="trigger(cameraKey)"

    :interactiveRatio="interactiveRatio"
    :interactiveQuality="interactiveQuality"
    :stillRatio="stillRatio"
    :stillQuality="stillQuality"
    :boxSelection="boxSelection"

    @BoxSelection="$emit('BoxSelection', $event)"
  />

</div>
